<script lang="ts" setup>

import {reactive, ref, type UnwrapRef} from 'vue';
import {Dayjs} from "dayjs";
import type {RangeValue} from "ant-design-vue/es/vc-picker/interface";
import type {Rule} from "ant-design-vue/es/form";
import {addJobAPI} from "@/apis/job.ts";
import {message} from "ant-design-vue";
import router from "@/router";
import {useInfoStore} from "@/store/user/user.ts";

//表单数据
interface FormState {
  jobStatus: string;
  jobEmployerId: string;
  jobTitle: string;
  jobType: string;
  jobSalary: string;
  jobSalaryType: string;
  jobGiveStartDate: Dayjs | null;
  jobGiveEndDate: Dayjs | null;
  jobStartDate: Dayjs | null;
  jobEndDate: Dayjs | null;
  jobWorkingHours: string;
  jobDescription: string;
  jobRequirements: string;
  jobLocation: string;
  rangeValue: [Dayjs | null, Dayjs | null];
  rangeValue2: [Dayjs | null, Dayjs | null];
}

const formRef = ref();
const formState: UnwrapRef<FormState> = reactive({
  jobStatus: '',
  jobEmployerId: '',
  jobTitle: '',
  jobType: '',
  jobSalary: '',
  jobSalaryType: '',
  jobStartDate: null,
  jobEndDate: null,
  jobGiveStartDate: null,
  jobGiveEndDate: null,
  jobWorkingHours: '',
  jobDescription: '',
  jobRequirements: '',
  jobLocation: '',
  rangeValue: [null, null],
  rangeValue2: [null, null],
});
const rules: Record<string, Rule[]> = {
  jobTitle: [
    {required: true, message: '请输入兼职名称', trigger: 'change'},
  ],
  jobType: [
    {required: true, message: '请选择兼职类型', trigger: 'change'},
  ],
  jobSalary: [
    {required: true, message: '请输入薪资待遇', trigger: 'change'},
  ],
  jobSalaryType: [
    {required: true, message: '请选择薪资类型', trigger: 'change'},
  ],
  rangeValue: [
    {type: 'array' as const, required: true, message: '请选择招聘周期!'},
    {
      validator: (_, value) => {
        if (!value || value.length === 0) {
          return Promise.reject('请选择工作周期');
        }
        const hasNull = value.some((item: any) => item === null);
        if (hasNull) {
          return Promise.reject('请选择工作周期');
        }
        return Promise.resolve();
      },
      trigger: 'change'
    }

  ],
  rangeValue2: [
    {type: 'array' as const, required: true, message: '请选择工作周期!'},
    {
      validator: (_, value) => {
        if (!value || value.length === 0) {
          return Promise.reject('请选择工作周期');
        }
        const hasNull = value.some((item: any) => item === null);
        if (hasNull) {
          return Promise.reject('请选择工作周期');
        }
        return Promise.resolve();
      },
      trigger: 'change'
    }

  ],
  jobWorkingHours: [
    {required: true, message: '请输入兼职时间安排', trigger: 'change'},
  ],
  jobDescription: [
    {required: true, message: '请输入兼职描述', trigger: 'change'},
  ],
  jobRequirements: [
    {required: true, message: '请输入兼职要求', trigger: 'change'},
  ],
  jobLocation: [
    {required: true, message: '请输入兼职地址', trigger: 'change'},
  ],
};
const userStore = useInfoStore().userInfo;
const onSubmit = () => {
  formRef.value
      .validate()
      .then(async () => {
        handleDateChange(formState.rangeValue)
        handleDateChange2(formState.rangeValue2)
        formState.jobEmployerId = userStore.userId
        formState.jobStatus = '正常招聘'
        console.log('提交', formState);
        const res = await addJobAPI(formState);
        if(res.data.flag){
          message.success('添加成功');
          router.go(-1)
        }else{
          message.error('添加失败');
        }
      })
      .catch((error: string) => {
        console.log('error', error);
      });

};
const labelCol = {style: {width: '150px'}};
const wrapperCol = {span: 14};
type RangeValue = [Dayjs | null, Dayjs | null];
const rangeValue = ref<RangeValue>();
const rangeValue2 = ref<RangeValue>();
// 可以添加方法来处理日期选择后的数据同步等逻辑，比如：
const handleDateChange = (dates: RangeValue) => {
  formState.jobGiveStartDate = dates[0];
  formState.jobGiveEndDate = dates[1];
  console.log('dates', dates)
};
const handleDateChange2 = (dates: RangeValue) => {
  formState.jobStartDate = dates[0];
  formState.jobEndDate = dates[1];
  console.log('dates', dates)
};
const resetForm = () => {
  formRef.value.resetFields();
};

</script>
<template>
  <div class="add_job">
    <div class="top">
      <a-page-header
          sub-title="添加岗位表单"
          title="返回"
          @back="() => $router.go(-1)"
      />
      <a-divider orientation="left" style="color:#4D7181; font-size: 20px;padding: 0 50px">基本信息</a-divider>
    </div>
    <div class="bottom">
      <div>
        <a-form
            ref="formRef"
            :label-col="labelCol"
            :model="formState"
            :rules="rules"
            :wrapper-col="wrapperCol"
        >
          <a-row gutter="16"> <!-- 使用a-row作为行容器，gutter设置列间距为16px -->
            <a-col :span="12"> <!-- 第一列占12格 -->
              <a-form-item ref="jobTitle" label="兼职名称" name="jobTitle">
                <a-input v-model:value="formState.jobTitle" />
              </a-form-item>

            </a-col>
            <a-col :span="12"> <!-- 第二列占12格 -->
              <a-form-item ref="jobType" :label-col="{style: {width: '100px'}}" label="兼职类型" name="jobType">
                <a-select v-model:value="formState.jobType" placeholder="选择你的学历" :allowClear="true" >
                  <a-select-option value="家教类">家教类</a-select-option>
                  <a-select-option value="餐饮类">餐饮类</a-select-option>
                  <a-select-option value="零售类">零售类</a-select-option>
                  <a-select-option value="技术类">技术类</a-select-option>
                  <a-select-option value="劳力类">劳力类</a-select-option>
                  <a-select-option value="其他">其他</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row gutter="16"> <!-- 使用a-row作为行容器，gutter设置列间距为16px -->
            <a-col :span="12"> <!-- 第一列占12格 -->
              <a-form-item ref="jobSalary" label="薪资待遇" name="jobSalary">
                <a-input-number v-model:value="formState.jobSalary" style="width: 100%"/>
              </a-form-item>
            </a-col>
            <a-col :span="12"> <!-- 第二列占12格 -->
              <a-form-item ref="jobSalaryType"
                           :label-col="{style: {width: '100px'}}"
                           label="薪资类型"
                           name="jobSalaryType"
              >
                <a-select v-model:value="formState.jobSalaryType" style="width: 40%">
                  <a-select-option value="时薪">时薪</a-select-option>
                  <a-select-option value="日薪">日薪</a-select-option>
                  <a-select-option value="月薪">月薪</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-form-item ref="rangeValue" label="招聘周期" name="rangeValue">
            <a-range-picker v-model:value="formState.rangeValue"/>
          </a-form-item>
          <a-form-item ref="rangeValue2" label="工作周期" name="rangeValue2">
            <a-range-picker v-model:value="formState.rangeValue2"/>
          </a-form-item>
          <a-form-item ref="jobWorkingHours" label="时间安排" name="jobWorkingHours">
            <a-textarea v-model:value="formState.jobWorkingHours"/>
          </a-form-item>
          <a-form-item ref="jobDescription" label="兼职描述" name="jobDescription">
            <a-textarea v-model:value="formState.jobDescription"/>
          </a-form-item>
          <a-form-item ref="jobRequirements" label="兼职要求" name="jobRequirements">
            <a-textarea v-model:value="formState.jobRequirements"/>
          </a-form-item>
          <a-form-item ref="jobLocation" label="兼职地点" name="jobLocation">
            <a-textarea v-model:value="formState.jobLocation"/>
          </a-form-item>


          <div class="form-button">
            <a-button type="primary" ghost @click="onSubmit">保存岗位</a-button>
            &nbsp  &nbsp  &nbsp  &nbsp
            <a-button type="primary" danger ghost @click="resetForm">重置表单</a-button>
          </div>

        </a-form>
      </div>
    </div>

  </div>

</template>

<style scoped>
.add_job {
  width: 100%;
  height: 100%;

  .bottom {
    padding-right: 50px;

    .form-button {
      margin-right: 100px;
      width: 400px;
      display: flex;
      float: right;
      justify-content: right;
    }
  }

}
</style>
